<template>
  <div class="box">
    <div class="content">
      <div class="left">
        <div>
          <h3>| 移通要闻</h3>
          <router-link to="/type">
            <span>
              更多
              <img src="../../public/img/前进.png" alt="" />
            </span>
          </router-link>
        </div>
        <hr />
        <div>
          <img
            src="http://www.cqyti.com/__local/C/6E/87/18A591AE64765BB1B4FFD356459_1CACBC77_D996.jpg"
            alt=""
          />
          <div class="text">
            <h3>我校召开本科教学合格评估工作堆...</h3>
            <p>
              根据《重庆移通学院本科教学工作合格评估工作方案》要求，为进一步推进学校本科教学合格评估工作，3月2日下午，评建工作办公室在行政楼203会议室召…
              <router-link :to="`/detail?id=1`">[查看详情]</router-link>
            </p>
          </div>
        </div>
        <ul>
          <li>
            <router-link :to="`/detail?id=2`"
              >教育集团完满教育常务委员会召开第一次全体会议</router-link
            >
          </li>
          <li>
            <router-link :to="`/detail?id=3`"
              >合川区委书记郑立伟来我校调研开学疫情防控工作</router-link
            >
          </li>
          <li>
            <router-link :to="`/detail?id=4`"
              >喜报！我校团委连续三年被获重庆共青团年度考核“特等”等次</router-link
            >
          </li>
          <li>
            <router-link :to="`/detail?id=5`"
              >新”移通！新增5个本科专业、1个重庆市重点实验室</router-link
            >
          </li>
          <li>
            <router-link :to="`/detail?id=6`"
              >喜讯！我校荣获中华思源工程扶贫基金会第十三届扬帆e+夏令营优秀组织奖...</router-link
            >
          </li>
          <li>
            <router-link :to="`/detail?id=7`"
              >喜报！我校志愿服务专项支队在全国公益赛事中斩获10项荣誉</router-link
            >
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="right1">
          <div>
            <h3>
              <div>|</div>
              <div
                :style="{ color: color1 }"
                @mouseover="
                  color1 = 'blue';
                  color2 = 'black';
                  show1 = 'block';
                  show2 = 'none';
                "
              >
                &nbsp;移通快讯&nbsp;
              </div>
              <div>/</div>
              <div
                :style="{ color: color2 }"
                @mouseover="
                  color1 = 'black';
                  color2 = 'blue';
                  show1 = 'none';
                  show2 = 'block';
                "
              >
                &nbsp;移通故事
              </div>
            </h3>
            <router-link to="/type">
              <span>
                更多
                <img src="../../public/img/前进.png" alt="" />
              </span>
            </router-link>
          </div>
          <hr />
          <ul :style="{ display: show1 }">
            <li>
              <router-link :to="`/detail?id=8`">
                【志愿服务】“4+1”新模式开启3月雷锋月，25场志...
                <span>2022-03-04</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=9`"
                >973期|书院印象:“联动出击,拜拜吧,细菌!”--我为...
                <span>2022-03-04</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=10`"
                >【学院风采】“计于春，立于行”——外国语学院召...
                <span>2022-03-04</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=11`"
                >【社团活动】阅诵锦绣文章，播谈心弦悟语 ——智能...
                <span>2022-03-04</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=12`"
                >【第105期│全生异科导师】新学期 再启航 ——异...
                <span>2022-03-03</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=13`"
                >【纪检监察】漫画说纪 警惕虚开发票套取公款
                <span>2022-03-03</span>
              </router-link>
            </li>
          </ul>
          <ul :style="{ display: show2 }">
            <li>
              <router-link :to="`/detail?id=14`"
                >【移通·校友汇】十年磨一剑，风雨未曾筑挡，从中铁...
                <span> 2022-03-02</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=15`"
                >【移通·人物】我与冬奥会的缘分，从平昌到北京——...
                <span>2022-02-21</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=16`"
                >【深度·校园】留学之梦，中德之旅
                <span>2022-01-13</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=17`"
                >【移通·人物】男生+卫生巾？被《新周刊》注意到的...
                <span>2022-01-10</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=18`"
                >【移通·人物】骆梦秋：在移通，发现别样的色彩
                <span>2022-01-07</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=19`"
                >【大咖·书评】职场巾帼英雄——《彭蕾传》读后感
                <span>2022-01-07</span>
              </router-link>
            </li>
          </ul>
        </div>
        <div class="right2">
          <div>
            <h3>
              <div>|</div>
              <div
                :style="{ color: color3 }"
                @mouseover="
                  color3 = 'blue';
                  color4 = 'black';
                  show3 = 'block';
                  show4 = 'none';
                "
              >
                &nbsp;通知通告&nbsp;
              </div>
              <div>/</div>
              <div
                :style="{ color: color4 }"
                @mouseover="
                  color3 = 'black';
                  color4 = 'blue';
                  show3 = 'none';
                  show4 = 'block';
                "
              >
                &nbsp;信息公开
              </div>
            </h3>
            <router-link to="/type">
              <span>
                更多
                <img src="../../public/img/前进.png" alt="" />
              </span>
            </router-link>
          </div>
          <hr />
          <ul :style="{ display: show3 }">
            <li>
              <router-link :to="`/detail?id=20`">
                关于做好2023届毕业生在校求职创业补贴工作的通知
                <span>2022-03-04</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=21`"
                >移通团字[2022]04号——关于做好共青团重庆移通学...
                <span>2022-03-04</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=22`"
                >重庆移通学院2022届毕业生理工科专场线上招聘会邀...
                <span>2022-03-03</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=23`"
                >重庆移通学院智能工程学院2022届毕业生春季专场招...
                <span>2022-03-03</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=24`"
                >关于组织实施“正大杯”第十二届全国大学生市场调...
                <span>2022-03-02</span>
              </router-link>
            </li>
          </ul>
          <ul :style="{ display: show4 }">
            <li>
              <router-link :to="`/detail?id=25`">
                关于学生社团更名的公告
                <span>2022-02-23</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=26`"
                >重庆移通学院2022年大学生创新创业训练计划项目拟...
                <span>2021-12-07</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=27`"
                >教育部公开曝光第八批8起违反教师职业行为十项准则...
                <span>2021-12-02</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=28`"
                >声明|关于2021钓鱼城·全国大学生影评大赛获奖名单...
                <span>2021-11-03</span>
              </router-link>
            </li>
            <li>
              <router-link :to="`/detail?id=29`"
                >重庆移通学院2020-2021学年度信息公开工作报告
                <span>2021-10-30</span>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      color1: "blue", //移通快讯字体颜色
      color2: "black", //移通故事字体颜色
      color3: "blue", //移通故事字体颜色
      color4: "black", //移通故事字体颜色
      show1: "block", //是否展示移通快讯
      show2: "none", //是否展示移通故事
      show3: "block", //是否展示通知通告
      show4: "none", //是否展示信息公开
    };
  },
  methods: {
    fun() {
      console.log("klklkjlk");
      this.ared = "blue";
      console.log(this.ared);
    },
    // getData() {
    //   this.axios.get(`/user/info?id=1`).then(res=>{
    //     console.log(res);
    //     this.data=res.data.data[0].content
    //   })
    // }
  },
  mounted() {
    // 页面挂载时执行方法获取文章详情
    // this.getData()
  },
};
</script>

<style lang="scss" scoped>
.box {
  // width: %;
  height: 100vh;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  text-align: left;
  ul li {
    list-style: none;
    padding: 1.5px 0;
  }
  a {
    color: black;
    text-decoration: none;
  }
  * {
    margin: 0;
    padding: 0;
  }
  .content {
    width: 1260px;
    height: 440px;
    box-sizing: border-box;
  }
  .left {
    background-color: #e1e5e6;
    float: left;
    width: 600px;
    height: 440px;
    padding: 20px;
    box-sizing: border-box;
    h3 {
      padding-left: 15px;
      // margin-top: -5px;
      padding-bottom: 15px;
      display: inline-block;
      cursor: pointer;
    }
    span {
      float: right;
    }
    span img {
      width: 25px;
      height: 20px;
      border: 0;
      float: right;
      margin-right: 0;
    }
    hr {
      margin-bottom: 10px;
    }
    img {
      width: 240px;
      height: 160px;
      border: 1px solid #000;
      float: left;
      margin-right: 15px;
    }
    .text {
      h3 {
        padding: 7px 0;
        color: #be0a0d;
      }
      p {
        text-indent: 24px;
        font-size: 16px;
        line-height: 2;
        color: #333;
        font-size: 14.5px;
      }
    }
    ul {
      list-style: none;
      margin-top: 10px;
      li {
        padding: 4px 0;
        a {
          color: black;
        }
      }
    }
  }
  .right {
    float: right;
    width: 590px;
    height: 440px;
    box-sizing: border-box;
    ul li {
      padding-left: 20px;
    }
    .right1 {
    background-color: #e1e5e6;
    width: 590px;
    height: 220px;
    box-sizing: border-box;
    padding: 20px;

    h3 {
      padding-left: 15px;
      margin-top: -5px;
      padding-bottom: 10px;
      display: inline-block;
      cursor: pointer;
      div {
        float: left;
      }
    }
    span {
      float: right;
    }
    span img {
      width: 25px;
      height: 20px;
      border: 0;
      float: right;
      margin-right: 0;
    }
    hr {
      margin-bottom: 10px;
    }
  }
  .right2 {
    background-color: #e1e5e6;
    margin-top: 15px;
    width: 590px;
    height: 203px;
    padding: 20px;
    box-sizing: border-box;
    h3 {
      padding-left: 15px;
      margin-top: -5px;
      padding-bottom: 10px;
      display: inline-block;
      cursor: pointer;
      div {
        float: left;
      }
    }
    span {
      float: right;
    }
    span img {
      width: 25px;
      height: 20px;
      border: 0;
      float: right;
      margin-right: 0;
    }
    hr {
      margin-bottom: 10px;
    }
  }
  }
  
}
</style>
